<template>
  <div
    class="buildRankBar"
    :class="'buildRankBar' + accType"
    :ref="'buildRankBar' + accType"
  ></div>
</template>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { storageLocal } from "/@/utils/storage";
import { onMounted, nextTick, ref, reactive, watch } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
import { getSectionInfo } from "/@/api/dashboards";
import { getDashboardRank } from "/@/api/dashboards";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

import { postProjectMngList } from "/@/api/project";

const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  accType: {
    type: String,
    default: "1"
  },
  color: {
    type: String,
    default: ""
  }
});
const emit = defineEmits(["clickItem"]);

const buildRankBar = ref<HTMLElement | null>(null) as any;

let echartInstance: ECharts;

let xAxisData = ref([]);
let seriesData = ref([]);
let selectedValue = ref("");
// let typeValue = ref(props.type);
let projectInfo = storageLocal.getItem("projectInfo");
let getDashboardRankData = ref({});
// let typeCodeValue = ref(props.typeCode);

let formInline = reactive({
  projectNameLike: "",
  projectRegionCode: "",
  projectFactoryCode: "",
  projectLeaderNameLike: "",
  projectTypeCode: "",
  projectYear: "",
  createTimeStrStart: "",
  createTimeStrEnd: "",
  pageNum: 1,
  pageSize: 10
});

const initChart = (xAxis, yData) => {
  if (!echartInstance) {
    return;
  }
  echartInstance.setOption({
    title: [
      {
        text: props.title,
        x: "left",
        y: 10,
        textStyle: {
          fontSize: 14,
          fontWeight: "normal",
          padding: 10
        }
      }
    ],
    grid: {
      left: 30,
      width: "77%",
      height: 125,
      x: 25
    },
    color: props.color,
    tooltip: {
      trigger: "item"
    },
    xAxis: {
      type: "category",
      triggerEvent: true,
      axisLabel: {
        interval: 0,
        rotate: 40,
        fontSize: 9,
        width: "70",
        overflow: "truncate",
        show: true
      },
      data: xAxis[props.accType]
    },
    yAxis: {
      type: "value"
    },
    // series: seriesData
    series: [
      {
        data: yData[props.accType],
        type: "bar",
        barMaxWidth: 20
      }
    ]
  });
};

function initechartInstance(xAxis, yData) {
  const echartDom = document.querySelector(".buildRankBar" + props.accType);
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  initChart(xAxis, yData);

  echartInstance.on("click", function (params) {
    let value = "" as any;
    if (params.componentType == "xAxis") {
      value = params.value;
    } else {
      value = params.name;
    }
    console.log(11, "********", selectedValue.value, value, params);
    if (selectedValue.value && selectedValue.value === value) {
      selectedValue.value = "";
      emit("clickItem", "");
      return;
    }
    selectedValue.value = value;
    emit("clickItem", value);
  });
}

//获取验收项排名信息
const getDashboardRankInfo = async () => {
  try {
    const { data } = await getDashboardRank({
      projectManageId: projectInfo.id
    });
    getDashboardRankData.value = data;
    let xAxisSeriesData = { "1": [], "2": [], "3": [], "4": [], "5": [] };
    let yDataSeriesData = { "1": [], "2": [], "3": [], "4": [], "5": [] };
    data.forEach(item => {
      let xData = [],
        yData = [];
      item.sectionIns.forEach(data => {
        xData.push(data.sectionName);
        yData.push(data.completeInsCount.civilCompleteTotal);
      });
      xAxisSeriesData[item.accType] = xData;
      yDataSeriesData[item.accType] = yData;
    });
    nextTick(() => {
      initechartInstance(xAxisSeriesData, yDataSeriesData);
    });
  } catch (err) {
    console.log(err);
  }
};
getDashboardRankInfo();

onMounted(() => {
  nextTick(() => {
    addResizeListener(buildRankBar.value, resetRender);
  });
  // useEventListener("resize", () => {
  //   console.log("resize");
  //   if (!echartInstance) return;
  //   useTimeoutFn(() => {
  //     echartInstance.resize();
  //   }, 180);
  // });
});

// watch(
//   () => props.type,
//   newVal => {
//     console.log(90, newVal);
//     // typeValue.value = newVal;
//     // initChart();
//   }
// );

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(buildRankBar.value, resetRender);
});
</script>

<style lang="scss" scoped>
.buildRankBar {
  margin-left: 3px;
  width: 100%;
  height: 115%;
}
</style>
